import { View } from '@tarojs/components'
import { useState } from 'react'
import { AvatarInput, Card, CheckboxInput, DatePicker, Form, PrimaryButton, TextInput } from '@/ui-components'
import { Gender } from '@/types'
import Taro from '@tarojs/taro'
import { dialog } from '@/utils'
import { UserParams, updateUserInfo } from '@/network/user'
import './index.scss'

const defaultAvatar = '/common/default-avatar.png'

interface UserState {
  avatar: string
  username: string
  gender ?: Gender
  birthday: string
}

const checkuserParams = (userParams: UserState) => {
  if (!userParams.username) {
    return '请输入昵称'
  }
  if (!userParams.avatar) {
    return '请上传头像'
  }
  if (!userParams.birthday) {
    return '请选择生日'
  }
  if (!userParams.gender) {
    return '请选择性别'
  }
  return ''
}

const checkUserAvatar = (avatar?: string) => {
  return new Promise((resolve, reject) => {
    if (avatar === defaultAvatar) {
      Dialogconfirm({
        content: '您确定使用默认头像作为您的头像吗?',
        onConfirm: () => {
          resolve(true)
        },
        onCancel: () => {
          reject()
        }
      })
    } else {
      resolve(true)
    }
  })
}


export default function User() {
  const [userParams, setUserParams] = useState<UserState>({
    avatar: defaultAvatar,
    username: '',
    gender: undefined,
    birthday: ''
  })


  const updateUserParams = () => {
    const checkResult = checkuserParams(userParams)
    if (checkResult) {
      Taro.showToast({ title: checkResult, icon: 'none' })
      return
    }
    checkUserAvatar(userParams.avatar).then(() => {
      updateUserInfo(userParams as UserParams).then(() => {
        Taro.showToast({ title: '保存成功' })
        Taro.navigateBack()
      })
    })
  }

  return (
    <View className='user-update'>
      <Card>
        <Form>
          <AvatarInput
            avatar={userParams.avatar}
            onChange={avatar => setUserParams({ ...userParams, avatar })}
            placeholder='点击修改头像'
          />
          <TextInput
            value={userParams.username}
            label='昵称'
            type='nickname'
            onChange={username => setUserParams({ ...userParams, username })}
            onConfirm={(username) => console.log(username)}
            onNickNameReview={(username) => console.log(username)}
            placeholder='请输入昵称'
            maxlength={20}
          />
          <DatePicker
            placeholder='请选择生日'
            label='生日'
            value={userParams.birthday}
            onChange={birthday => setUserParams({ ...userParams, birthday })}
          />
          <CheckboxInput
            label='性别'
            value={userParams.gender}
            options={
              [
                { name: '男', value: Gender.man },
                { name: '女', value: Gender.woman }
              ]
            }
            onChange={gender => setUserParams({ ...userParams, gender})}
          />
        </Form>
      </Card>
      <PrimaryButton
        text='保存'
        onClick={updateUserParams}
      />
    </View>
  )
}
